<template>
	<view>
		<view class="serach">
			<input class="ip" @focus="goSerach" type="text" value="" placeholder="搜索"/>
		</view>
		<van-row>
		  <van-col span="8">
			  <van-sidebar v-model="active" @change='tab'>
			    <van-sidebar-item :title="item.cat_name" v-for="(item,index) in CeList" :key="index"/>
			  </van-sidebar>
		  </van-col>
		  <van-col span="16">
			  <view v-for="(item,index) in CeList[active].children" :key="index">
				  <view>{{item.cat_name}}</view>
				  <van-grid column-num="3" >
					<van-grid-item use-slot v-for="(ite,ind) in item.children" :key="ind" @tap="Gogoods(ite.cat_id)">
						<image :src="ite.cat_icon" style="width: 100%;height: 160rpx;"></image>
						<view>{{ite.cat_name}}</view>
					</van-grid-item>
				  </van-grid>
			  </view>
		  </van-col>

		</van-row>

	</view>
</template>

<script>
	import {getCe} from '../../api/api.js'
	export default {
		data() {
			return {
				CeList:[],
		        active:0,
				allList:[],
			};
		},
		onLoad() {
			this.Celist()
	        
		},
		methods:{
			async Celist(){
				let res=await getCe()
				console.log('ee',res)
			    this.CeList=res
			},
            tab(e) {
            	this.active = e.detail
				console.log( e.detail)
            },

			Gogoods(id){
				wx.navigateTo({
					url:"../goodList/goodList?id="+id
				})
			}
		},
	}
</script>

<style lang="scss">
.serach{
	height: 100rpx;
	width: 100%;
	background: red;
	overflow: hidden;
}
.ip{
		width: 90%;
		border-radius: 25px;
		color: black;
		background-color: white;
		font-size:10px;
		line-height:25px; 
		height:20px;
		margin: 10px 10px;
		text-align:center;
	}
</style>
